<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>备份记录</title>
    <link rel="stylesheet" th:href="@{/css/base.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.0.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/base.js}"></script>
    <style>
        body{
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div class="container container-index">
    <form class="layui-form layui-form-pane" id="search-form" lay-filter="search-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">所属分区</label>
                <div class="layui-input-inline">
                    <select name="zoneId">
                        <option value="" selected>请选择</option>
                        <option th:each="item : ${zone}" th:value="${item.id}" th:text="${item.name}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">所属实例</label>
                <div class="layui-input-inline">
                    <select name="nodeId">
                        <option value="" selected>请选择</option>
                        <option th:each="item : ${node}" th:value="${item.id}" th:text="${item.name}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">备份来源</label>
                <div class="layui-input-inline">
                    <select name="category">
                        <option value="" selected>请选择</option>
                        <option value="手动备份">手动备份</option>
                        <option value="自动备份">自动备份</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">备份状态</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option value="" selected>请选择</option>
                        <option value="0">备份中</option>
                        <option value="1">上传中</option>
                        <option value="200">成功</option>
                        <option value="-1">失败</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">数据库名</label>
                <div class="layui-input-inline">
                    <input type="text" name="databaseName" autocomplete="off" class="layui-input" placeholder="请输入">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">数据表名</label>
                <div class="layui-input-inline">
                    <input type="text" name="tablesName" autocomplete="off" class="layui-input" placeholder="请输入">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">备份时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="timeRange" id="test6" placeholder="请选择">
                </div>
            </div>
            <div class="layui-inline">
                <button type="submit" class="layui-btn layui-btn-sm layui-bg-blue" lay-submit
                        lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                </button>
                <button type="submit" class="layui-btn layui-btn-sm layui-btn-primary" lay-submit
                        lay-filter="data-reset-btn"><i class="layui-icon">&#xe669;</i> 重 置
                </button>
            </div>
        </div>
    </form>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="clear"><i class="layui-icon">&#xe640;</i>
                一键清空
            </button>
        </div>
    </script>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
        {{#
        var html='<span class="toolbar_span">';
            html+='<a src="javascript:void(0)" lay-event="del">删除</a>';
            html+='<a src="javascript:void(0)" lay-event="detail">详情</a>';
            if(d.filePath) {
            html+='<a src="javascript:void(0)" lay-event="download">下载</a>';
            }
            return html+'</span>'
        }}
    </script>
</div>


<script type="text/javascript" th:inline="javascript">
    layui.use(['jquery', 'form', 'table', 'layer', 'laydate'], function () {
        const form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            layer = layui.layer;

        // 日期范围
        laydate.render({
            elem: '#test6'
            ,range: true
        });

        var currTable = Asurplus.tableRender({
            table: table,
            form: form,
            url: ctxPath + 'backup-log/list',
            cols: [
                [
                    {field: '', title: '', type:'numbers', templet: function (d) {return d.LAY_TABLE_INDEX + 1;}},
                    {field: 'category', title: '备份来源', templet: function (d) {
                            if('手动备份' == d.category) {
                                return '<span class="badge-custom-1">' + d.category + '</span>';
                            }
                            else {
                                return '<span class="badge-custom-2">' + d.category + '</span>';
                            }
                        }},
                    {field: 'zoneName', title: '所属分区'},
                    {field: 'nodeName', title: '实例名称'},
                    {field: 'databaseName', title: '数据库名'},
                    {field: 'tablesName', title: '数据表名'},
                    {field: 'dataType', title: '备份方式', templet: function (d) {
                        if(0 == d.dataType) {
                            return '表结构';
                        }
                        if(1 == d.dataType) {
                            return '表数据';
                        }
                        return '表结构+表数据';
                        }},
                    {field: 'status', title: '备份状态', templet: function (d) {
                        if (0 == d.status) {
                            return '<span class="badge-custom-2">备份中</span>'
                        }
                        if (1 == d.status) {
                            return '<span class="badge-custom-2">上传中</span>'
                        }
                        if (2 == d.status) {
                            return '<span class="badge-custom-1">成功</span>'
                        }
                        if (-1 == d.status) {
                            return '<span class="badge-custom-3">失败</span>'
                        }
                        }},
                    {field: 'fileSize', title: '文件大小', templet: function (d) {
                        let size = parseFloat(d.fileSize / 1024).toFixed(2)
                        if(size < 1024) {
                            return size + ' KB';
                        }
                        else if(1024 <= size && size < 1024 * 1024) {
                            return parseFloat(size / 1024).toFixed(2) + 'MB';
                        }
                        else {
                            return parseFloat(size / 1024 / 1024).toFixed(2) + 'GB';
                        }
                        }},
                    {field: 'startTime', minWidth: 180, title: '开始时间'},
                    {field: 'spendTime', title: '耗时', templet: function (d) {
                        let time = d.spendTime;
                        // ms
                        if(0 <= time && time < 1000) {
                            return time + '毫秒';
                        }
                        // s
                        else if(1000 <= time && time < 60 * 1000) {
                            return parseFloat(time / 1000).toFixed(2) + '秒';
                        }
                        // minute
                        else if(60 * 1000 <= time && time < 60 * 60 * 1000) {
                            return (time / 1000 / 60).toFixed(0) + '分' + ((time / 1000) % 60).toFixed(2) + '秒';
                        }
                        // hour
                        else {
                            return (time / 1000 / 60 / 60).toFixed(2) + '小时'
                        }
                        }},
                    {title: '操作', minWidth: 150, toolbar: '#currentTableBar', fixed: 'right'}
                ]
            ]
        });

        // 表头工具
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'clear') {
                layer.confirm('确认清空所有的备份记录？', {
                    btn: ['确定'],
                    title: '提示'
                }, function(index){
                    Asurplus.get({
                        url: ctxPath + 'backup-log/deleteAll/'
                    }, () => {
                        layer.close(index);
                        currTable.reload();
                    });
                });
                return false;
            }
        });

        // 表行工具
        table.on('tool(currentTableFilter)', function (obj) {
            const data = obj.data;
            // 删除
            if (obj.event === 'del') {
                layer.confirm('确认删除', {
                    btn: ['确定'],
                    title: '提示'
                }, function(index){
                    Asurplus.get({
                        url: ctxPath + 'backup-log/delete/' + data.id
                    }, () => {
                        layer.close(index);
                        currTable.reload();
                    });
                });
                return false;
            }
            // 详情
            else if(obj.event === 'detail') {
                Asurplus.openLayer({
                    title: '新建备份',
                    content: ctxPath + 'backup-log/backup-log-detail/' + data.id
                }, () => {
                    currTable.reload();
                })
                return false;
            }
            // 下载
            else if(obj.event === 'download') {
                if (-1 < data.filePath.indexOf("http")) {
                    window.open(data.filePath);
                } else {
                    window.open(ctxPath + data.filePath);
                }
                return false
            }
        });
    })
</script>
</body>
</html>